<template>
  <div class="posttable">
    <el-row style="  margin-bottom: 10px;">
      <el-col :span="24" style="padding-right: 30px;padding-left: 40px;margin-top: 10px;">
        <el-row>
          <el-col class="bot">
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">需求名称</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata.job">{{requiredata.job.name}}</p>
              </el-col>
            </el-col>
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">需求状态</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata.job">{{requiredata.job.status}}</p>
              </el-col>
            </el-col>
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">客户简称</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata.job">{{requiredata.job.customerName}}</p>
              </el-col>
            </el-col>
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">工作地点</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata.job">{{requiredata.job.addr}}</p>
              </el-col>
            </el-col>
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">所属区域</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata.job">{{requiredata.job.area}}</p>
              </el-col>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="bot1">
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">职位名称</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata.job">{{requiredata.job.postName}}</p>
              </el-col>
            </el-col>
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">职位级别</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata.job">{{requiredata.job.postLevel}}</p>
              </el-col>
            </el-col>
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">职位类型</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata.job">{{requiredata.job.postType}}</p>
              </el-col>
            </el-col>
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">需求人数</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata.job">{{requiredata.job.number}}</p>
              </el-col>
            </el-col>
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">需求程度</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata.job">
                  <span v-if="requiredata.job.star == 3" style="color:#FF1C1D;">困难</span>
                  <span v-if="requiredata.job.star == 2" style="color:#2931FE;">普通</span>
                  <span v-if="requiredata.job.star == 1" style="color:#FFC027;">简单</span>
                  <span v-if="requiredata.job.star == 0" style="color:#04344a;">空</span>
                </p>
              </el-col>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="bot1">
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">薪资上限</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata.job">{{requiredata.job.salaryCap}}</p>
              </el-col>
            </el-col>
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">薪数</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata.job">{{requiredata.job.salaryNum}}</p>
              </el-col>
            </el-col>
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">技术面试</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata.job">{{requiredata.job.techInterview}}</p>
              </el-col>
            </el-col>
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">作息时间</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata.job">{{requiredata.job.timeTable}}</p>
              </el-col>
            </el-col>
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">关键词</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata.job">{{requiredata.job.ordinaryKeywords}}</p>
              </el-col>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="bot1">
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">发布时间</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata.job">{{requiredata.job.putTime | converTime('YYYY/MM/DD')}}</p>
              </el-col>
            </el-col>
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">截止时间</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata.job">{{requiredata.job.endTime | converTime('YYYY/MM/DD')}}</p>
              </el-col>
            </el-col>
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">期望到岗</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata.job">{{requiredata.job.expectTime}}</p>
              </el-col>
            </el-col>
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">组别</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata.job" style="color:#5ba6fe;">{{requiredata.job.hr}}</p>
              </el-col>
            </el-col>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="bot1">
            <el-col  style="width: 20%;">
              <el-col>
                <p class="title">面试流程</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata.job">{{requiredata.job.interviewProcess}}</p>
              </el-col>
            </el-col>
            <el-col  style="width: 20%;">
              <el-col>
                <p class="title">需求编号</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata.job">{{requiredata.job.no}}</p>
              </el-col>
            </el-col>
            <el-col   style="width: 20%;">
            <el-col>
              <p class="title">技术电面</p>
            </el-col>
            <el-col>
              <p class="text" v-if="requiredata.job">
                <span v-if="requiredata.job.isDm == 'Y'">需要</span>
                <span v-if="requiredata.job.isDm == 'N'">不需要</span>
              </p>
            </el-col>
          </el-col>
          <el-col  style="width: 20%;">
            <el-col>
              <p class="title">电面方向</p>
            </el-col>
            <el-col>
              <p class="text" v-if="requiredata.job">{{requiredata.job.direction}}</p>
            </el-col>
          </el-col>
          <el-col   style="width: 20%;">
            <el-col>
              <p class="title">电面人员</p>
            </el-col>
            <el-col>
              <p class="text" v-if="requiredata.job">{{requiredata.job.charge}}</p>
            </el-col>
          </el-col>
          </el-col>
        </el-row>
        <el-row class="bot1">
          <el-col v-for="(item,index) in requiredata.mails" :key="index">
            <el-col style="width: 20%;">
              <el-col>
                <p class="title">收件人邮箱</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata.mails">{{item.receiverMail}}</p>
              </el-col>
            </el-col>
            <el-col style="width: 20%;" v-for="(item1,index1) in item.cpSendMails" :key="index1"  :style="{'margin-top': (index1 <= 3 ? '0px':'30px')}">

              <el-col >
                <p class="title">抄送人邮箱</p>
              </el-col>
              <el-col>
                <p class="text" v-if="requiredata.mails">{{item1.mail}}</p>
              </el-col>
            </el-col>
          </el-col>
        </el-row>
        <el-row >
          <el-col class="bot" :span="12">
            <el-col >
              <p class="title">职位职责</p>
            </el-col>
            <el-col>
              <div v-if="requiredata.job">
                <p class="text" v-for="item in requiredata.job.duty" :key="item">
                  {{item}}
                </p>
              </div>
            </el-col>
          </el-col>
          <el-col class="bot" :span="12">
            <el-col>
              <p class="title">任职要求</p>
            </el-col>
            <el-col>
              <div v-if="requiredata.job">
                <p class="text" v-for="item in requiredata.job.require" :key="item">{{item}}</p>
              </div>
            </el-col>
          </el-col>
        </el-row>

      </el-col>
    </el-row>
  </div>
</template>
<script>
  import axios from 'axios'
  import qs from 'qs'
  
  export default {
    name: 'jobdetail',
    props: {
      detailNo: {}
    },
    data() {
      return {
        requiredata: {}
      }
    },
    created() {
      axios.post(this.url + '/resumeUpload/getJobDetail', qs.stringify({
        no: this.detailNo
      })).then(res => {
        this.unlogin(res.data)
        if (res.data.code == 200) {
          this.requiredata = res.data.data;
          this.requiredata.job.duty = this.requiredata.job.duty.split(/\n/);
          this.requiredata.job.require = this.requiredata.job.require.split(/\n/);
        }
      })
    },
    mounted() {
    
    }
  }
</script>
<style scoped>
  .title {
    color: #757575;
    margin-bottom: 10px;
    font-size: 14px;
  }
  
  .text {
    width: 98%;
    color: #333333;
    font-weight: 700;
    font-size: 14px;
  }
  
  .bot {
    margin-bottom: 20px;
  }
  
  .bot1 {
    margin-bottom: 30px;
  }
</style>
